<template>
  <div class="user">
<!--    <el-tabs v-model='tabPaneName' @tab-click='handleClick'>-->
<!--            <el-tab-pane v-for='tab in tabs' :key='tab.name+"1"' :name='tab.name' :label='tab.label'>{{tab.content}}-->
<!--            </el-tab-pane>-->
<!--        </el-tabs>-->
<!--        <el-tabs v-model='tabPaneName' type='card' closable @tab-remove='handleRemove'>-->
<!--            <el-tab-pane v-for='tab in tabs' :key='tab.name+"2"' :name='tab.name' :label='tab.label'>{{tab.content}}-->
<!--            </el-tab-pane>-->
<!--&lt;!&ndash;        </el-tabs>&ndash;&gt;-->
<!--    <div>-->
<!--        <el-tabs v-model='tabPaneName' type='border-card' editable @edit='handleEdit'>-->
<!--            <el-tab-pane v-for='tab in tabs' :key='tab.name+"3"' :name='tab.name' :label='tab.label'>-->
<!--            </el-tab-pane>-->
<!--        </el-tabs>-->
<!--      </div>-->

                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="首页" name="first"></el-tab-pane>
                        <el-tab-pane label="用户管理" name="second"></el-tab-pane>
                        <el-tab-pane label="其他" name="third"></el-tab-pane>
                    </el-tabs>



<el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        style="margin-left: 20px; line-height: 10px"
    >
      <el-form-item  ref="formRef">
        <el-input
            v-model="formInline.name"
            placeholder="用户名"
        ></el-input>

      </el-form-item>
<!--      <el-form-item label="科室类型">-->
<!--        <el-select v-model="form.deptType" placeholder="科室类型">-->
<!--          <el-option label="临床专科" value="1"></el-option>-->
<!--          <el-option label="医疗科室" value="2"></el-option>-->
<!--          <el-option label="暂未划分" value="3"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
  <el-form-item  >
        <el-button type="warning" plain @click="select">搜索</el-button>
        <el-button type="primary" plain @click="select">新增</el-button>
        <el-button type="success" plain @click="newDepartment"
        >批量删除
        </el-button
        >
<!--        <el-button type="danger" plain @click="resetForm('formInline')"-->
<!--        >重置-->
<!--        </el-button-->
<!--        >-->
      </el-form-item>
    </el-form>


<el-table
    :data="tableData"
       tooltip-effect="dark"
          style="margin-left: 20px; line-height: 10px; "
    :header-cell-style="{background:'#F2F6FC',color:'#000000'}"
          border
          stripe>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
       <el-table-column
            prop="gender"
            label="性别"
            width="60">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.gender==1">男</el-tag>
            <el-tag v-else-if="scope.row.gender==2">女</el-tag>
          </template>
        </el-table-column>
  <el-table-column
            prop="role_list"
            label="角色名称">
          <template slot-scope="scope">
            <el-tag size="small" type="danger" v-for="item in scope.row.role_list">{{ item.name }}</el-tag>
          </template>

        </el-table-column>
        <el-table-column
            prop="email"
            label="邮箱">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="手机号">
        </el-table-column>

        <el-table-column
            prop="enabled"
            label="状态">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.enabled" type="success">正常</el-tag>
            <el-tag size="small" v-else-if="scope.row.enabled" type="danger">禁用</el-tag>
          </template>

        </el-table-column>
        <el-table-column
            prop="create_time"
            width="200"
            label="创建时间"
        >
        </el-table-column>
        <el-table-column
            prop="icon"
            width="260px"
            label="操作">
          </el-table-column>
  </el-table>

</div>
</template>

<script>
export default {
  name: 'User',
  data() {
            return {
                position: '',
                tabPaneName: 'first',
                tabs: [{ name: 'first', label: '首页',},
                { name: 'second', label: '用户' },
                { name: 'third', label: '饮料',  },
                { name: 'fouth', label: '部门',  }],




                    course_total: 0,   // 当前总数量
      filter: {
        course_category: 0, // 当前用户选择的课程分类，刚进入页面默认为全部，值为0
        ordering: "orders",    // 数据的排序方式，默认值是orders，表示对于id进行降序排列
        size: 5,       // 单页数据量
        page: 1,
      },
      formInline: {
        name: "",
        depart_type_name: "",
        deptType: "",
      },
      form: {
        id: "",
        department_code: "",
        name: "",
        deptType: "",
        depart_type_name: "",
        add_name: ""
      },
      user: {},
      deptTable: [],
      multipleSelection: [],
      pageTotal: "",
      departmentPageDto: {},
      departmentClassification: [],
      departmentType: [],
      drawer: false,
      direction: "rtl",

                   tableData: [{
          date: '6.15',
          name: '周阿奇',
          address: '上海市普陀区金沙江路 1518 弄',
                     gender:'1',
                     role_list:[{name: '小小测试'}],
                     email:'12312341234',
                     phone:'112312312',
                     enabled:'1',
                     create_time:'1111',




        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }



        ,
        methods: {

            //点击钩子
            handleClick(target, action) {
                console.log(target.name, action)
            },
            //删除钩子
            handleRemove(targetName) {
                this.tabs.forEach((item, index) => {
                    if (item.name === targetName) {
                        this.tabs.splice(index, 1)
                    }
                });
            },
            //编辑钩子
            handleEdit(targetName, action) {
                if (action === 'remove') {
                    this.tabs.forEach((item, index) => {
                        if (item.name === targetName) {
                            this.tabs.splice(index, 1)
                        }
                    })
                } else if (action === 'add') {
                    let addItem = {
                        name: "newName" + this.tabs.length,
                        label: "newLabel" + this.tabs.length,
                        content: "newContent" + this.tabs.length
                    }
                    this.tabs.push(addItem)
                }
            }
        }

}
</script>

<style scoped>
/*::v-deep .el-tabs__nav-wrap::after{*/
/*display: none;}*/

::v-deep .el-tabs__active-bar{
width: 60px;
height: 5px;
background: linear-gradient(to right, #51fad3 1%, rgba(250,81,81,0) 100%);
box-shadow: 0px 5px 28px 0px rgba(0,131,249,0.2028);
border-radius: 98px 98px 98px 98px;
z-index: -99999;
margin-bottom: 10px;}

::v-deep .el-tabs__item{
font-size: 16px;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500 !important;
color: #3D3D3D !important;}
.yzk{
  margin:0px;
  paddig: 0px;
}

/**
改变边框颜色
 */
.el-table--border, .el-table--group {
    border: 1px solid #8A8A8A!important;
}
/**
改变表格内竖线颜色
 */
.el-table--border  td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #8A8A8A!important;
}
/**
改变表格内行线颜色
 */
.el-table  td, .el-table th.is-leaf  {
    border-bottom: 1px solid #8A8A8A!important;
}

.el-table thead tr th{
    border-color: #8c939d;
}


</style>